<template>
  <vxe-column v-bind="$attrs" v-on="$listeners">
    <template slot-scope="scope">
      <el-form-item v-if="isEdit(scope.row)" label="" :prop="$attrs.field">
        <el-switch ref="inputWidget" :value="switchValue" :size="size" @input="onSwitchChange" />
      </el-form-item>
      <!-- 判断是否有default的slot -->
      <slot v-else-if="$slots.default || $scopedSlots.default" :row="scope.row" />
      <!-- 默认显示内容 -->
      <span v-else>{{ getRowValue(scope.row) ? '是' : '否' }}</span>
    </template>
  </vxe-column>
</template>

<script>
import { TableInlintColumnMixins } from './tableInlineColumn.js';

export default {
  name: 'InlineSwitchColumn',
  props: {
    /**
     * 行内编辑组件尺寸
     */
    size: {
      type: String,
      default: 'small'
    }
  },
  mixins: [TableInlintColumnMixins],
  methods: {
    /**
     * 切换开关
     * @param {boolean} value
     */
    onSwitchChange(value) {
      let tempValue = value;
      if (typeof tempValue === 'string') tempValue = value ? 'true' : 'false';
      else if (typeof tempValue === 'number') tempValue = value ? 1 : 0;
      this.onChange(tempValue);
    }
  },
  computed: {
    /**
     * 获取开关值
     */
    switchValue() {
      let tempValue = this.getRowData;
      if (tempValue == null) return false;
      if (typeof tempValue === 'string') {
        tempValue = tempValue === 'true';
      } else if (typeof tempValue === 'number') {
        tempValue = tempValue === 1;
      }
      return tempValue;
    }
  }
};
</script>

<style></style>
